<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="添加时间">
      <template #default="scope">
        <span>{{ forDate(scope.row.createTime) }}</span>
      </template> </el-table-column
    >>
    <el-table-column label="最后登录">
      <template #default="scope">
        <span>{{ forDate(scope.row.loginTime) }}</span>
      </template> </el-table-column
    >>
    <el-table-column label="是否启用">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default>
        <el-button size="small" type="text">分配角色</el-button>
        <el-button size="small" type="text" @click="editAdmin">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <AdminDialog :visible="visible" @close="close" />
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from 'vue'
import dayjs from 'dayjs'
import { getAdminUserList } from '@/api'
import AdminDialog from './components/AdminDialog.vue'

const state = reactive<any>({
  tableData: [],
  keyword: '',
  pageNum: 10,
  pageSize: 1,
  visible: false,
})

let { tableData, keyword, pageNum, pageSize, visible } = toRefs(state)
// 获取用户列表
getAdminUserList({ keyword, pageNum, pageSize }).then((res) => {
  tableData = res.data.list
})
// 定义时间格式化函数
function forDate(str: any) {
  if (str) {
    return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
  } else {
    // 如果日期不存在
    return dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  }
}

// 编辑按钮
const editAdmin = () => {
  visible.value = true
}

// 取消
const close = () => {
  visible.value = false
}
</script>

<style scoped lang="scss"></style>
